:root {
  --el-color-primary: #ff7a45; /* warm orange */
  --el-color-success: #52c41a;
  --el-color-warning: #faad14;
  --el-color-danger: #ff4d4f;
  --el-color-info: #fa8c16;

  --brand-warm-1: #fff7f0;
  --brand-warm-2: #ffe6d5;
  --brand-warm-3: #ffd5bd;
  --brand-warm-4: #ffbf99;
}

html, body, #app {
  height: 100%;
}

body {
  margin: 0;
  color: #4a3b31;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255, 186, 150, 0.35), transparent 60%),
    radial-gradient(800px 400px at 10% 0%, rgba(255, 144, 104, 0.25), transparent 60%),
    url('/bg-warm.svg') center/cover no-repeat,
    var(--brand-warm-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
    "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.el-button--primary {
  --el-button-bg-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
}

.section {
  padding: 56px 20px;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
}

/* Smooth base transitions */
* {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Card hover motion */
.el-card {
  border-color: rgba(255, 153, 102, 0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.el-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(255, 122, 69, 0.18);
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* Page switch transition */
.page-enter-active, .page-leave-active { transition: opacity .25s ease, transform .25s ease; }
.page-enter-from, .page-leave-to { opacity: 0; transform: translateY(8px); } 